<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/layui/css/modules/layer/default/layer.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css" />

    <%--使用webuploader要先引入jquery.js--%>
    <script src="/static/js/jquery.min.js"></script>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/webuploader/style.css" />
    <!--引入JS-->
    <script type="text/javascript" src="/static/webuploader/webuploader.js"></script>


    <script src="/static/layui/layui.js"></script>
    <script src="/static/layui/lay/modules/layer.js"></script>

</head>

<body>

<form class="layui-form" action="">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header layuiadmin-card-header-auto">
                    <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.</p>
                </div>
                <div class="layui-card-body">
                    <div class="page-container">
                        <input type="hidden" name="photo" id="photo" value="">
                        <div id="uploader" class="wu-example">
                            <div class="queueList">
                                <div id="dndArea" class="placeholder">
                                    <div id="filePicker"></div>
                                    <p>JPG,JPEG,PNG,BMP,GIF</p>
                                </div>
                            </div>
                            <div class="statusBar" style="display:none;">
                                <div class="layui-progress layui-progress-big active" lay-showpercent="true">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%">
                                    </div>
                                </div>
                                <div class="info"></div>
                                <div class="btns">
                                    <div id="filePicker2"></div>
                                    <div class="uploadBtn">Upload</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">Submit</button>
                <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
            </div>
        </div>
    </form>
</body>
<%--注意只能在这里引入webuploader_upload.js ，不然点击选择图片按钮不能出现--%>
<script type="text/javascript" src="/static/webuploader/webuploader_upload.js"></script>

<script>
    layui.use(['form','layer'], function(){

        var form = layui.form,
            layer = layui.layer;

        form.on('submit(formDemo)', function(data){

            var photo = data.field.photo;
            alert(photo);
            if (photo == '' ){
                layer.msg("Please upload at least one picture",{time:1000,icon:2});
            }
            // $.ajax({
            //     url : '',
            //     type : 'post',
            //     dataType : 'json',
            //     data : data.field,
            //     success : function (data) {
            //         if (data.code == 200){
            //             layer.msg(data.msg,{icon: 1, time: 500},function (index) {
            //                 layer.close(index);
            //                 window.parent.location.reload();
            //             });
            //         }else{
            //             layer.msg(data.msg,{icon: 2, time: 1000});
            //         }
            //     }
            // })
            return false;
        });

    })

</script>

</html>